<template>
  <div class="sdy-register">
    <Teleport to=".header">
      <header-com title="注册"></header-com>
    </Teleport>
    <van-steps class="steps-box" :active="active" active-icon="circle" active-color="#07c160">
      <van-step>验证手机号</van-step>
      <van-step>验证验证码</van-step>
      <van-step>确认注册</van-step>
      <van-step>完成注册</van-step>
    </van-steps>

    <div v-if="active === 0" class="test-tel">
      <van-form @failed="telFailedHandler" @submit="telSubmitHandler">
        <van-cell-group inset>
          <van-field
            v-model="tel"
            label="手机号"
            label-width="100px"
            name="pattern"
            placeholder="请填写手机号"
            :rules="[{ pattern: /^\d{11}$/, message: '请输入正确手机号' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            验证手机号
          </van-button>
        </div>
      </van-form>
    </div>

    <div v-if="active === 1" class="test-code">
      <van-form @failed="codeFailedHandler" @submit="codeSubmitHandler">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="code"
            label="验证码"
            label-width="100px"
            name="pattern"
            placeholder="请填写验证码"
            :rules="[{ pattern: /^\d{5}$/, message: '请输入正确验证码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button @click="getCodeHandler" round type="primary" native-type="button">
            获取验证码
          </van-button>
          <van-button round type="primary" native-type="submit">
            下一步
          </van-button>
        </div>
      </van-form>
    </div>

    <div v-if="active === 2" class="register-box">
      <van-form @failed="regiFailedHandler" @submit="regiSubmitHandler">
        <van-cell-group inset>
          <van-field
            v-model="tel"
            label="手机号"
            label-width="100px"
            name="pattern"
            placeholder="请填写手机号"
            :rules="[{ pattern: /^\d{11}$/, message: '请输入正确手机号' }]"
          />
        </van-cell-group>
        <van-cell-group inset>
          <van-field
            v-model="password"
            label="密码"
            label-width="100px"
            name="pattern"
            placeholder="请填写密码"
            :rules="[{ pattern: /^\w{6,12}$/, message: '请输入正确密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            确认注册
          </van-button>
        </div>
      </van-form>
    </div>

    <div v-if="active === 3" class="finish-box">
      <van-icon class="finish-icon" name="checked" />
      <p>注册成功</p>
      <router-link to="/login">去登录</router-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeaderCom from '@/components/header.vue'
import { showFailToast, showSuccessToast } from 'vant'
import { ref } from 'vue'
import { checkedTel, getCode, checkedCode, register } from '@/apis/users'

interface ResponseInfo {
  code: string
  message: string
}

const active = ref<number>(0)

// 验证手机号的逻辑
// 准备一个变量, 表示手机号
const tel = ref<string>('')

// 表单验证成功的方法
const telSubmitHandler = async () => {
  // 发送请求
  const res = await checkedTel(tel.value)

  // 根据结果判断
  // 表示被注册过, 该手机号不能使用
  if ((res as unknown as ResponseInfo).code === '10005') {
    showFailToast('手机号已注册\n请直接登录')
    return
  }

  // 代码来到这里, 表示没有注册过
  // 可以进入下一步
  // 让 active++
  active.value = 1
}
// 表单验证失败的方法
const telFailedHandler = () => {
  showFailToast('请按照要求填写手机号')
}

// 验证验证码的逻辑
// 准备一个变量, 表示验证码
const code = ref<string>('')

// 获取验证码的方法
const getCodeHandler = async () => {
  // 发送请求获取验证码
  const res = await getCode(tel.value)
  showSuccessToast(`验证码已发送\n${res.data}`)
}

// 表单验证成功的方法
const codeSubmitHandler = async () => {
  // 验证验证码是否正确
  const res = await checkedCode(tel.value, code.value)

  // 表示验证码不正确
  if ((res as unknown as ResponseInfo).code === '10007') {
    showFailToast('验证码不正确')
    return
  }

  // 代码执行到这里, 表示验证码正确
  active.value = 2
}
// 表单验证失败的方法
const codeFailedHandler = () => {
  showFailToast('请按照要求填写验证码')
}

// 确认注册的逻辑
// 准备一个变量表示密码
const password = ref<string>('')

// 表单验证成功的方法
const regiSubmitHandler = async () => {
  // 发送请求进行注册
  await register(tel.value, password.value)
  showSuccessToast('注册成功')

  // 进入到下一个环节
  active.value = 3
}

// 表单验证失败的方法
const regiFailedHandler = () => {
  showFailToast('请按照要求填写表单')
}

</script>

<style lang="scss" scoped>
.sdy-register {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;

  > .steps-box {
    width: 80%;
  }

  > .test-tel, > .test-code, > .register-box, > .finish-box {
    margin-top: 20px;
  }
}

.finish-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  > p {
    margin: 10px 0;
    color: green;
  }
}

.finish-icon {
  font-size: 100px;
  color: green;
  display: block;
}
</style>
